<template>
  <view class="content">
		<canvas canvas-id="circleCanvas" style="width: 200px; height: 200px;"></canvas>
		<view class="precent">{{ percent }}%</view>
		<view class="pre-text">
			<!-- <view class="text">{{ text }}</view> -->
			<view class="text-do">
				<view class="bar">任</view>
				<view class="bar">务</view>
				<view class="bar">执</view>
				<view class="bar">行</view>
				<view class="bar">中</view>
				<view class="bar">请</view>
				<view class="bar">勿</view>
				<view class="bar">离</view>
				<view class="bar">开</view>
				<view class="bar">页</view>
				<view class="bar">面</view>
				<view class="bar">.</view>
				<view class="bar">.</view>
				<view class="bar">.</view>
			</view>
		</view>
		
  </view>
</template>
 
<script>
export default {
	props: {
		progress: {
			type: Number,
			default: 0,
		},
		percent: {
			type: Number,
			default: 0,
		},
		text: {
			type: String,
			default: '任务执行中，请勿离开页面',
		},
	},
  data() {
    return {
   //    progress: 0.1, // 进度条的百分比，0.5代表50%
			// percent: 10,
			// text: '正在执行，请稍后...'
    };
  },
	watch: {
		// progress(val) {
		// 	console.log('val', val)
		// 	this.percent = val * 100
		// }
	},
  onReady() {
	// setInterval(()=>{
	// 	this.progress+=0.01
	// 	this.percent += 10
	// 	this.drawCircle(this.progress)
	// },3000)
    this.drawCircle(this.progress);
  },
  methods: {
    drawCircle(progress) {
      const ctx = uni.createCanvasContext('circleCanvas', this);
      const x = 100; // 圆心的x坐标
      const y = 100; // 圆心的y坐标
      const radius = 50; // 圆的半径
 
      // 绘制底色圆环
      ctx.beginPath();
      ctx.arc(x, y, radius, 0, 2 * Math.PI);
      ctx.setLineWidth(10);
      ctx.setStrokeStyle('#e5e5e5');
      ctx.stroke();
 
      // 绘制进度圆环
      ctx.beginPath();
      ctx.arc(x, y, radius, -0.5 * Math.PI, (-0.5 + progress * 2) * Math.PI);
      ctx.setLineWidth(10);
      ctx.setStrokeStyle('#ff6005');
      ctx.stroke();
 
      ctx.draw();
			this.$emit('drawCircle')
    }
  }
};
</script>
 
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
	position: relative;
	width: 100%;
	height: 400rpx;
	.precent{
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	}
	
	.pre-text {
		display: flex;
		justify-content: center;
		white-space: nowrap;
		position: absolute;
		bottom: 0rpx;
	}
	
	.text-do {
		display: flex;
		font-size: 28rpx;
	}
	
	.bar {
		animation: bounce 1s infinite;
		// background: linear-gradient(to top, #6F31F4, #FF6005);
		// color: transparent;
		-webkit-background-clip: text;
	}
	
	.bar:nth-child(1) {
		animation-delay: 0s;
	}
	
	.bar:nth-child(2) {
		animation-delay: 0.1s;
	}
	
	.bar:nth-child(3) {
		animation-delay: 0.2s;
	}
	.bar:nth-child(4) {
		animation-delay: 0.3s;
	}
	
	.bar:nth-child(5) {
		animation-delay: 0.4s;
	}
	
	.bar:nth-child(6) {
		animation-delay: 0.5s;
	}
	.bar:nth-child(7) {
		animation-delay: 0.6s;
	}
	
	.bar:nth-child(8) {
		animation-delay: 0.7s;
	}
	
	.bar:nth-child(9) {
		animation-delay: 0.8s;
	}
	.bar:nth-child(10) {
		animation-delay: 0.9s;
	}
	
	.bar:nth-child(11) {
		animation-delay: 1s;
	}
	
	.bar:nth-child(12) {
		animation-delay: 1.1s;
	}
	.bar:nth-child(13) {
		animation-delay: 1.2s;
	}
	.bar:nth-child(14) {
		animation-delay: 1.3s;
	}
	
	
	@keyframes bounce {
	
		0%,
		100% {
			transform: translateY(6rpx);
		}
	
		50% {
			transform: translateY(-6rpx);
		}
	}
	// .text {
	// 	position: absolute;
	// 	bottom: 0rpx;
	// 	white-space: nowrap;
	// 	// left: 50%;
	// 	// transform: translateX(-50%);
	// }
}
</style>